<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/base.css" rel="stylesheet"/>
    <script src="js/jquery1.42.min.js" type="text/javascript"></script>
    <script src="js/flexible.min.js" type="text/javascript"></script>
    <script src="js/vue.js" type="text/javascript"></script>
    <title></title>
</head>
<body style="background-color: rgb(242,242,242);">
    <div class="denglu" id="app">
        <div>
            <div class='ningmengshidai'>柠檬时代</div>
            <div class='fubiaoti'>礼品卡回收</div>
            <img src="img/hy_b.png" class='picture'>
        </div>
        <!-- 登陆-->
        <div v-if="state==0">
            <div class="denglupage">
                <div class="dlpage_top">
                    <div class="on">账号登陆</div>
                    <div>密码登陆</div>
                </div>
                <div class="dlpage_bottom">
                    <div class="item">
                        <div class='right_phone'><img src='img/login.png'/><input placeholder='请输入手机号码' /> </div>
                        <div class='right_phone'><img src='img/pwd.png'/><input placeholder='请输入密码' /></div>
                        <div class='denglu_btn'>登陆</div>
                    </div>
                    <div class="item">
                        <div class='right_phone'><img src='img/login.png'/><input placeholder='请输入手机号码' /></div>
                        <div class='pwd_yzm'>
                            <div class='right_pwd'><img src='img/login1.png'/><input placeholder='请输入验证码'/> </div>
                            <span class='yzm'>获取</span>
                        </div>
                        <div class='denglu_btn'>登陆</div>
                    </div>
                </div>
            </div>
            <div class="xuanxiang">
                <div>忘记密码</div><div @click="zhuce">注册账号</div>
            </div>
        </div>
        <!--注册 -->
        <div v-if="state==1" class="aaa">
            <div class='zhuce' >
                <div class='zhuce_title'>注册账号</div>
                <div class='zhuce_ouput'>
                    <span>用户名：</span><input placeholder='输入账号名/用户名' />
                </div>
                <div class='zhuce_ouput'>
                    <span>密码：</span><input placeholder='输入账号名/用户名' />
                </div>
                <div class='zhuce_ouput'>
                    <span>手机号：</span><input placeholder='输入账号名/用户名' />
                </div>
                <div class='zhuce_ouput'>
                    <span>验证码：</span><input placeholder='输入账号名/用户名' /><small>获取</small>
                </div>
                <div class='btn_tongyi'>同意协议并创建客户</div>
            </div>
            <div class='xieyishu'><div class='text'>创建账号即表示你同意《梆梆销卡用户协议》</div><div>已有账户?<span @click='denglu'>立即登陆</span></div></div>

        </div>
    </div>
</body>
<script>
    window.onload = function(){

        new Vue({
            el:'#app',
            data:{
                state:0
            },
            methods:{
                zhuce:function(){
                    this.state = 1
                },
                denglu:function(){
                    this.state = 0
                },

            },

        })
        Vue.nextTick(function(){
            $('.dlpage_bottom>div').eq(0).show()
            $('.dlpage_top>div').click(function() {
                var index = $(this).index()
                $(this).addClass('on')
                $(this).siblings().removeClass('on')
                $('.dlpage_bottom>div').eq(index).show()
                $('.dlpage_bottom>div').eq(index).siblings().hide()
            })
        })
    }


</script>
<script>

    $('.dlpage_bottom>div').eq(0).show()
    $('.dlpage_top>div').click(function() {
        var index = $(this).index()
        $(this).addClass('on')
        $(this).siblings().removeClass('on')
        $('.dlpage_bottom>div').eq(index).show()
        $('.dlpage_bottom>div').eq(index).siblings().hide()
    })
</script>
</html>